/* left */
/* 遮罩动画 */
.slide-expand-left-enter-active {
  animation: slide-expand-left-fade-in 0.2s;
}

.slide-expand-left-leave-active {
  animation: slide-expand-left-fade-out 0.2s;
}

/* 遮罩动画 */
@keyframes slide-expand-left-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-expand-left-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}


.slide-shrink-left-enter-active {
  animation: slide-shrink-left-fade-in 0.2s;
}

.slide-shrink-left-leave-active {
  animation: slide-shrink-left-fade-out 0.2s;
}

@keyframes slide-shrink-left-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-shrink-left-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* right */
/* 遮罩动画 */
.slide-expand-right-enter-active {
  animation: slide-expand-right-fade-in 0.2s;
}

.slide-expand-right-leave-active {
  animation: slide-expand-right-fade-out 0.2s;
}

/* 遮罩动画 */
@keyframes slide-expand-right-fade-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-expand-right-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}


.slide-shrink-right-enter-active {
  animation: slide-shrink-right-fade-in 0.2s;
}

.slide-shrink-right-leave-active {
  animation: slide-shrink-right-fade-out 0.2s;
}

@keyframes slide-shrink-right-fade-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-shrink-right-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* bottom */
/* 遮罩动画 */
.slide-expand-bottom-enter-active {
  animation: slide-expand-bottom-fade-in 0.2s;
}

.slide-expand-bottom-leave-active {
  animation: slide-expand-bottom-fade-out 0.2s;
}

/* 遮罩动画 */
@keyframes slide-expand-bottom-fade-in {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-expand-bottom-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}


.slide-shrink-bottom-enter-active {
  animation: slide-shrink-bottom-fade-in 0.2s;
}

.slide-shrink-right-leave-active {
  animation: slide-shrink-bottom-fade-out 0.2s;
}

@keyframes slide-shrink-bottom-fade-in {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-shrink-bottom-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
